<template>
  <el-card
      class="attraction-card"
      :body-style="{ padding: '0px' }"
      shadow="hover"
  >
    <!-- 景点图片 -->
    <div class="image-container">
      <el-image
          :src="attraction.coverImageUrl"
          :alt="attraction.poiName"
          fit="cover"
          class="image"
          :preview-src-list="[attraction.coverImageUrl]"
          loading="lazy"
      >
        <template #error>
          <div class="image-slot">
            <el-icon><Picture /></el-icon>
          </div>
        </template>
      </el-image>

      <!-- 景点等级标签 -->
      <div class="level-badge" v-if="attraction.sightLevel">
        {{ attraction.sightLevel }}
      </div>

      <!-- 热度评分 -->
      <div class="heat-score" v-if="attraction.heatScore">
        <el-icon><Star /></el-icon>
        {{ attraction.heatScore }}
      </div>
    </div>

    <!-- 景点信息 -->
    <div class="content">
      <div class="header">
        <h3 class="title">{{ attraction.poiName }}</h3>
        <div class="district">{{ attraction.districtName }}</div>
      </div>

      <!-- 评分和评论数 -->
      <div class="rating-section" v-if="attraction.commentScore">
        <el-rate
            v-model="attraction.commentScore"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}"
        />
        <span class="comment-count">({{ attraction.commentCount }}条评论)</span>
      </div>

      <!-- 价格信息 -->
      <div class="price-section">
        <div v-if="attraction.isFree" class="free-price">免费</div>
        <div v-else class="price-info">
          <span class="current-price">¥{{ attraction.price }}</span>
          <span v-if="attraction.marketPrice && attraction.marketPrice !== attraction.price"
                class="market-price">¥{{ attraction.marketPrice }}</span>
          <span class="price-desc">{{ attraction.priceTypeDesc }}</span>
        </div>
      </div>

      <!-- 特色标签 -->
      <div class="tags-section" v-if="attraction.tagNames && attraction.tagNames.length">
        <el-tag
            v-for="tag in attraction.tagNames.slice(0, 3)"
            :key="tag"
            size="small"
            class="tag"
        >
          {{ tag }}
        </el-tag>
      </div>

      <!-- 简短特色 -->
      <div class="features" v-if="attraction.shortFeatures">
        {{ attraction.shortFeatures }}
      </div>

      <!-- 距离信息 -->
      <div class="distance" v-if="attraction.distanceStr">
        <el-icon><MapLocation /></el-icon>
        {{ attraction.distanceStr }}
      </div>

      <!-- 操作按钮 -->
      <div class="actions">
        <div class="button-row">
          <el-button
              type="primary"
              size="small"
              @click="viewDetails"
              style="flex: 1;"
          >
            查看详情
          </el-button>
          <el-button
              type="danger"
              size="small"
              @click="handleDelete"
              :loading="deleteLoading"
              style="flex: 1;"
          >
            <el-icon><Delete /></el-icon>
          </el-button>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { MapLocation, Picture, Star, Delete } from "@element-plus/icons-vue";

const props = defineProps({
  attraction: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['delete'])
const deleteLoading = ref(false)

const viewDetails = () => {
  if (props.attraction.detailUrl) {
    window.open(props.attraction.detailUrl, '_blank')
  } else {
    ElMessage.info('暂无详情页面')
  }
}

const handleDelete = async () => {
  try {
    await ElMessageBox.confirm(
        `确定要删除景点 "${props.attraction.poiName}" 吗？`,
        '删除确认',
        {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'warning',
          confirmButtonClass: 'el-button--danger'
        }
    )

    deleteLoading.value = true

    // 触发父组件的删除事件
    emit('delete', props.attraction.poiId)

    ElMessage.success('删除成功')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败，请重试')
      console.error('删除景点失败:', error)
    }
  } finally {
    deleteLoading.value = false
  }
}
</script>

<style scoped>
.attraction-card {
  height: 500px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.attraction-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
  display: block;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 30px;
}

.level-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.heat-score {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
  color: #ff9900;
  font-weight: bold;
}

.content {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.header {
  margin-bottom: 10px;
}

.title {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.district {
  color: #909399;
  font-size: 12px;
}

.rating-section {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.comment-count {
  color: #909399;
  font-size: 12px;
}

.price-section {
  margin-bottom: 10px;
}

.free-price {
  color: #67c23a;
  font-weight: bold;
  font-size: 16px;
}

.price-info {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.current-price {
  color: #e6a23c;
  font-weight: bold;
  font-size: 18px;
}

.market-price {
  color: #909399;
  font-size: 12px;
  text-decoration: line-through;
}

.price-desc {
  color: #909399;
  font-size: 12px;
}

.tags-section {
  margin-bottom: 10px;
}

.tag {
  margin-right: 5px;
  margin-bottom: 3px;
}

.features {
  color: #606266;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.distance {
  color: #909399;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 15px;
}

.actions {
  margin-top: auto;
}

.button-row {
  display: flex;
  align-items: center;
}

/* 删除按钮悬停效果 */
:deep(.el-button--danger) {
  transition: all 0.3s ease;
}

:deep(.el-button--danger:hover) {
  transform: scale(1.05);
}

/* 响应式优化 */
@media (max-width: 768px) {
  .button-row {
    flex-direction: column;
    gap: 8px;
  }

  .button-row .el-button {
    width: 100% !important;
    margin-left: 0 !important;
  }
}
</style>